<template>
  <a-card :bordered="false">
    <!-- 条件搜索 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="任务名称">
              <a-input v-model="queryParam.taskName" placeholder="请输入任务名称" allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
          </a-col>
          <a-col :md="8" :sm="24">
            <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
            <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 数据展示 -->
    <a-table
      :loading="loading"
      rowKey="taskId"
      :columns="columns"
      :data-source="list"
      :pagination="false"
      :scroll="{ y: 300 }"
      @change="handleTableChange">
      <span slot="taskName" slot-scope="text, record">
        <a @click="submitTask(record)">
          {{ text }}
        </a>
      </span>
    </a-table>
    <!-- 分页 -->
    <a-pagination
      class="ant-table-pagination"
      show-size-changer
      show-quick-jumper
      :current="queryParam.pageNum"
      :total="total"
      :page-size="queryParam.pageSize"
      :showTotal="total => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
      @change="changeSize"
    />
  </a-card>
</template>
<script>
import { findTodo } from '@/api/workflow/workflow'
import { mapGetters } from 'vuex'

export default {
  name: 'Todo',
  components: {},
  props: {},
  data () {
    return {
      list: [],
      loading: false,
      total: 0,
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        taskName: undefined
      },
      selectedRowKeys: [],
      selectedRows: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          customRender: (text, record, index) => `${(this.queryParam.pageNum - 1) * this.queryParam.pageSize + index + 1}`,
          width: 60
        },
        {
          title: '任务名称',
          dataIndex: 'taskName',
          scopedSlots: { customRender: 'taskName' },
          align: 'center',
          ellipsis: true
        },
        {
          title: '任务节点',
          dataIndex: 'nodeName',
          align: 'center',
          width: 120
        },
        {
          title: '任务类型',
          dataIndex: 'wfName',
          align: 'center',
          width: 120
        },
        {
          title: '发起人',
          dataIndex: 'startUserName',
          align: 'center',
          width: 120
        },
        {
          title: '发起人部门',
          dataIndex: 'startDeptName',
          align: 'center',
          ellipsis: true
        },
        {
          title: '创建时间',
          dataIndex: 'taskCreateTime',
          align: 'center',
          ellipsis: true
        }
      ]
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['userId'])
  },
  methods: {
    // 查询
    handleQuery () {
      this.loading = true
      this.queryParam.userId = this.userId
      findTodo(this.queryParam).then(res => {
        if (res.code === 200) {
          this.list = res.data.rows
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    // 重置
    resetQuery () {
      this.queryParam = {
        pageNum: 1,
        pageSize: 10,
        taskName: undefined
      }
      this.handleQuery()
    },
    submitTask (record) {
      this.$router.push({ path: record.bizUrl })
    },
    handleTableChange (pagination, filters, sorter) {
      const sort = this.tableSorter(sorter)
      this.queryParam.orderByColumn = sort.orderByColumn
      this.queryParam.isAsc = sort.isAsc
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.handleQuery()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.handleQuery()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.taskId)
      this.multiple = !selectedRowKeys.length
    }
  },
  created () {
    this.handleQuery()
  },
  mounted () {}
}
</script>,
<style lang="scss" scoped>
</style>
